<template>
  <view>
<!--
vertical="true"：纵向滑动，不写默认为横向滑动
indicator-dots="true"：显示指示点
indicator-color="blue"：默认指示点颜色
indicator-active-color="red"指示点选中颜色
circular="true"播放到末尾后重新回到开头
circular="true" 自动轮播
:interval="1000"：1秒中切换一次
-->
     <swiper
         indicator-dots="true"
         indicator-color="blue"
         indicator-active-color="#dd524d"
         circular="true"
         autoplay="true"
         :interval="1000"
         @change="onchange"
     >
       <swiper-item
           class="swiper-item"
           v-for="(item, index) in 20" :key="item">
         {{item}}
       </swiper-item>
     </swiper>
  </view>
</template>

<script setup lang="js">
function  onchange(e){
  console.log('onchange',e)
  // 获取当前 swiper 页面的索引
  const currentIndex = e.detail.current;
  console.log('页面改变了，当前索引：', currentIndex);
}
</script>


<style scoped lang="scss">
swiper{
  height: 100px;
  width: 100%;
  swiper-item{
    width: 100%;
    height: 100%;
    background-color: #4cd964;
  }

  swiper-item:nth-child(2n){//2n是偶数
    background-color:#3F536E;
  }
}

</style>
